{% extends 'common/panel.html' %}
{% block head %}
	<link rel="stylesheet" href="{{MEDIA_URL}}projects/nc_mlpa/css/mpa_hab_representation.css" type="text/css" media="all" title="no title" charset="utf-8"/>
{% endblock head %}
{% block title %}{{mpa.name}} Representation Report{% endblock title %}
{% block panel %}
    <div class="tabs">
        <ul>
            <li><a href="#RepresentationDataTable"><span>Data Table</span></a></li>
            <li><a href="#RepresentationChart"><span>Chart</span></a></li>
        </ul>
        <div id="RepresentationDataTable">
        	<table class='hab_repr_container'>
        		<tr>
        			<th>Habitat</th>
        			<th>Quantity</th>
        			<th>Units</th>
        			<th>Percent of SR Total</th>
        		</tr>
        		{% for sub_dict in result.values|dictsort:'sort' %}
        		<tr class="{% cycle '' 'grey' %}">
        			<td class="habitat_name">{{ sub_dict.name|title }}</td>
        			<td class="mpa_hab_result">
        				<span class="rounded">{{ sub_dict.result|floatformat:'2' }}</span>
        				<span class="unrounded">{{ sub_dict.result|floatformat:'-6' }}</span>
        			</td>
        			<td>{{ sub_dict.units }}</td>
        			<td class="numeric">{{ sub_dict.percent_of_total|floatformat:'-2' }}%</td>
        		</tr>
        		{% endfor %}
        	</table>            
        </div>
        <div id="RepresentationChart">
            <div style="width:450px; overflow:hidden;" class="habitat_representation" id="MPAHabitatRepresentation"></div>
            <script type="text/javascript" charset="utf-8">
                var hab_data = JSON.parse('{{json|safe}}');
				lingcod.onShow('#RepresentationChart', function(ui){
					var el = $('#MPAHabitatRepresentation');
					var report = lingcod.persistentReports['MPAHabitatReplication'];
					if(report){
						$('#MPAHabitatRepresentation').append(report.paper.canvas);
						report.update(hab_data, true);
					}else{
					    var report = mlpa.representationReport($('#MPAHabitatRepresentation'), hab_data, true);
					    if(!$.browser.msie){
					        lingcod.persistentReports['MPAHabitatReplication'] = report;
					    }
					}					
				});
            </script>
			<p>This histogram shows how much habitat your MPA has captured. Use the data layers to visualize how you can make changes in your MPA geometry that affect these numbers.</p>
        </div>
    </div>
{% endblock panel %}